<template>
    <div>
      <el-form-item label="发送好友">
        <BaseForm
          class="searchForm"
          ref="searchForm"
          type="search"
          :items="formItems"
          v-model:form="searchParams"
          @search="handleSearch"
        >
          <template #default>
            <el-form-item>
              <span style="font-size: font-size: 13px;">
                待执行：<span style="color: #02a7f0"
                  >{{ conutTotal.toBeExecutedNum }}&emsp;</span
                >
                已执行：
                <span style="color: #70b603"
                  >{{ conutTotal.executedNum }}&emsp;</span
                >
                已发送：
                <span style="color: #70b603">{{ conutTotal.sentNum }}&emsp;</span>
                未发送：
                <span style="color: #aaaaaa"
                  >{{ conutTotal.unSentNum }}&emsp;</span
                >
              </span>
            </el-form-item>
          </template>
        </BaseForm>
      </el-form-item>
      <BaseTable
        ref="baseTable"
        class="baseTable"
        :getTableDataFn="contentManagementService.relationPageUserList"
        :searchParams="searchParams"
        size="small"
        max-height="300px"
      >
        <el-table-column
          prop="relationRobotName"
          label="机器人名称"
          minWidth="150"
        />
        <el-table-column prop="wxUserName" label="好友微信昵称" minWidth="170" />
        <el-table-column prop="realUserName" label="姓名" minWidth="170" />
        <el-table-column prop="executeStatus" label="执行状态" width="100">
          <template #default="scope">
            <ExecuteStatus :status="scope.row.executeStatus"></ExecuteStatus>
          </template>
        </el-table-column>
        <el-table-column prop="sendStatus" label="发送状态" width="100">
          <template #default="scope">
            <SendStatusName :status="scope.row.sendStatus"></SendStatusName>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
  </template>
  
  <script setup lang="ts">
  import { contentManagementService } from '@/api/contentManagement'
  
  const props = defineProps({
    tableData: {
      type: Array,
    },
    id: {
      type: String,
    },
  })
  const formItems = ref([
    {
      key: 'wxUserName',
      type: 'input',
      placeholder: '请输入好友微信昵称',
    },
    {
      key: 'sendStatus',
      type: 'select',
      placeholder: '发送状态',
      options: [
        { label: '全部', value: '' },
        { label: '已发送', value: 2 },
        { label: '未发送', value: 1 },
      ],
    },
  ])
  const searchParams = ref({
    publishMessageId: props.id,
  })
  const baseTable = ref(null)
  const handleSearch = () => {
    baseTable.value.handleSearch({
      ...searchParams.value,
    })
    getCount()
  }
  const conutTotal = ref({
    toBeExecutedNum: '',
    executedNum: '',
    sentNum: '',
    unSentNum: '',
  })
  const getCount = () => {
    contentManagementService
      .relationWxUserStatistics({ data: searchParams.value })
      .then((res) => {
        conutTotal.value = res.data
      })
  }
  onMounted(() => {
    getCount()
  })
  </script>
  
  <style lang="scss" scoped>
  @import './index.scss';
  </style>
  